<template>
  <div class="container">
    <div class="structure">
      <template v-if="pathId">
        <directorysTwo :path-id="pathId" :path-name="pathName" />
      </template>
      <template v-else>
        <el-row>
          <el-col :span="20">
            <el-form :inline="true" class="demo-form-inline">
              <el-form-item style="margin-left: 15px" label="目录名称">
                <el-input
                  v-model="queryNamw.directoryName"
                  size="mini"
                  @input="changeValue"
                />
              </el-form-item>
              <el-form-item label="状态" style="margin-left: 30px">
                <el-select
                  v-model="queryNamw.state"
                  size="mini"
                  placeholder="请选择"
                >
                  <el-option label="启用" value="1" />
                  <el-option label="禁用" value="0" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button size="mini" @click="dirClear">清除</el-button>
                <el-button
                  type="primary"
                  size="mini"
                  @click="dirSou"
                >搜索</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-row
            type="flex"
            justify="end"
          ><el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="showDialog = true"
          >新增目录</el-button></el-row>
          <el-col :span="4" />
        </el-row>
        <!-- 总计 -->
        <el-alert
          :closable="false"
          :title="`数据一共有${total}条`"
          type="info"
          show-icon
        />
        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%; margin-top: 20px" :header-cell-style="headerCellStyle">
          <el-table-column type="index" label="序号" />
          <el-table-column
            prop="subjectName"
            label="所属学科"
          />
          <el-table-column
            prop="directoryName"
            label="目录名称"
          />
          <el-table-column prop="username" label="创建者" />
          <el-table-column label="创建日期">
            <template v-slot="{row}">
              <span>{{ fromDir(row.addDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="totals" label="面试数量" />
          <el-table-column label="状态">
            <template v-slot="{ row }">
              <span>{{ row.state === 1 ? "已启用" : "已禁用" }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-button type="text" size="medium" @click="btn(row)">
                <span>{{ row.state === 1 ? "禁用" : "启用" }}</span>
              </el-button>
              <el-button
                :disabled="row.state === 1"
                type="text"
                size="medium"
                @click="dirUplod(row)"
              >修改</el-button>
              <el-popconfirm title="这是一段内容确定删除吗？" @confirm="delDir(row)">
                <el-button
                  slot="reference"
                  :disabled="row.state === 1"
                  type="text"
                  size="medium"
                  style="margin-left:10px"
                  @click="delDir(row)"
                >删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row type="flex" justify="end" style="height: 60px" align="middle">
          <el-pagination
            background
            layout="prev, pager, next,sizes,jumper"
            :page-size="queryPamas.pagesize"
            :page-sizes="[5, 10, 15, 20]"
            :total="total"
            :current-page="queryPamas.page"
            @current-change="changePage"
            @size-change="changePagesize"
          />
        </el-row>
      </template>
    </div>
    <directorys
      ref="dirAddData"
      :show-dialog.sync="showDialog"
      @direData="dirList"
    />
  </div>
</template>

<script>
import directorysTwo from './components/directorysTwo.vue'
import moment from 'moment'
import {
  list as dirList,
  changeState,
  remove as dirRemoveRow
} from '@/api/hmmm/directorys.js'
import directorys from '@/module-hmmm/components/directorys-add.vue'
export default {
  name: 'Dire',
  components: {
    directorysTwo,
    directorys
  },
  data() {
    return {
      select: '',
      tableData: [],
      // 从学科哪里跳转回来传来的id
      pathId: '',
      // 名字
      pathName: '',
      // 根据页数查询
      queryPamas: {
        page: 1,
        pagesize: 5
        // directoryName: '', // 目录名称
        // state: ''// 状态 1 开启 0 屏蔽
      },
      // 根据目录查询
      queryNamw: {
        directoryName: '',
        state: ''
      },
      // 总个数
      total: 10,
      // 开关
      showDialog: false,
      headerCellStyle: {
        backgroundColor: 'rgb(244, 244, 245)', // 设置背景颜色为红色
        color: 'rgba(144, 147, 153)' // 设置文本颜色为白色
      }
    }
  },
  created() {
    // 获取学科管理传来的id
    this.idd()
    this.dirList()
  },
  methods: {
    idd() {
      this.pathId = this.$route.query.id
      this.pathName = this.$route.query.name
    },
    // 获取目录列表
    async dirList() {
      // console.log(this.queryPamas)
      const {
        data: { items, counts }
      } = await dirList(this.queryPamas)
      // console.log(items)
      this.tableData = items
      this.total = counts
    },
    // 当前页查询
    changePage(newPage) {
      this.queryPamas.page = newPage
      this.dirList()
    },
    // 条数查询
    changePagesize(newPagesize) {
      this.queryPamas.pagesize = newPagesize
      this.dirList()
    },
    // 清除
    dirClear() {
      this.queryPamas = {
        page: 1,
        pagesize: 5,
        directoryName: (this.queryNamw.directoryName = ''),
        state: (this.queryNamw.state = '')
      }
      this.dirList()
    },
    changeValue(val) {
      if (!val) {
        this.queryPamas = {
          page: 1,
          pagesize: 5,
          directoryName: this.queryNamw.directoryName,
          state: this.queryNamw.state
        }
        this.dirList()
      }
    },
    // 搜素
    dirSou() {
      this.queryPamas = {
        page: 1,
        pagesize: 5,
        directoryName: this.queryNamw.directoryName,
        state: this.queryNamw.state
      }
      this.dirList()
    },
    // 改变按钮状态
    async btn(row) {
      if (row.state === 1) {
        row.state = 0
        await changeState(row)
        this.$message.success('操作成功')
      } else {
        row.state = 1
        await changeState(row)
        this.$message.success('操作成功')
      }
    },
    // 获取详情数据
    dirUplod(row) {
      this.$nextTick(async() => {
        // console.log(row)
        await this.$refs.dirAddData.detailDir(row)
        this.showDialog = true
      })
    },
    // 删除
    async delDir(row) {
      // if (this.tableData.length === 1 && this.queryPamas.page > 1) this.queryPamas.page--
      await dirRemoveRow(row)
      this.dirList()
    },
    // 转换时间
    fromDir() {
      return moment().format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style scoped lang="scss">
.structure {
  width: 100%;
  background-color: #fff;
  padding: 20px 30px 0 20px;
  margin-left: 10px;
  margin-top: 10px;
  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
}
</style>
